<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>alikorol首页</title>
		<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="/static/fullPage/css/jquery.fullPage.css">
		<link rel="stylesheet" href="/static/css/common.css">
		<link rel="stylesheet" href="/static/css/base.css">
		<link rel="stylesheet" href="/static/css/hover.css">
		<link rel="stylesheet" href="/static/css/index.css">
	</head>
	<body>
		<div class="pageControl index">
			<div class="msui_navTop">
				<div class="msui_cell msui_navTop-contain flex_justify2 flex_align">
					<div class="msui_navTop-logo">
						<P>asdasd</P>
					</div>
					<div class="msui_navTop-tab">
						<a class="cssBtn btn-1 btn-1a micon-homepage">
							<span>主页</span>
						</a>
						<a class="cssBtn btn-1 btn-1a micon-blog"><span>博客</span></a>
						<a class="cssBtn btn-1 btn-1a micon-others"><span>其他</span></a>
					</div>
					<div class="msui_navTop-login">
						<span>注册</span>/
						<span>登录</span>
					</div>
				</div>
			</div>
			<!--<div class="msui_cell msui_navBottom">
				<p>created by korol---Github:799834285@qq.com</p>
			</div>-->
			<div id="fullPage">
				<div class="section section1 msui_flex flex_justify2 flex_align">
					<div class="typerContent flex_justify1 msui_flex msui_item">
						<div class="type" id="type"></div>
						<span class="typer"></span>
					</div>
					<div class="botButton">
						<a href="#page2" class="top-ico3"></a>
					</div>
				</div>
				<div class="section section2">
					<div class="msui_flex flex_align flex_direction header">
						<div class="msui_item headerTitle js-header">
							<span>About Me</span>
						</div>
						<div class="msui_item headerBaseline"></div>
					</div>
					<div class="msui_flex subtitle">
						<div class="msui_item">
							<p>纸上得来终觉浅...</p>
						</div>
					</div>
					<ul class="msui_flex showList">
						<li  class="msui_flex msui_item js-list1">
							<a class="msui_item">
								<img src="static/images/1.jpg">
								<span>123</span>
							</a>
						</li>
						<li  class="msui_flex msui_item js-list2">
							<a class="msui_item">
								<img src="static/images/1.jpg">
								<span>123</span>
							</a>
						</li>
						<li  class="msui_flex msui_item js-list3">
							<a class="msui_item">
								<img src="static/images/1.jpg">
								<span>123</span>
							</a>
						</li>
					</ul>
					<div class="botButton">
						<a href="#page3" class="top-ico2"></a>
					</div>
				</div>
				<div class="section section3">
					<div class="msui_flex flex_align flex_direction header">
						<div class="msui_item headerTitle js-header">
							<span>Growing</span>
						</div>
						<div class="msui_item headerBaseline"></div>
					</div>
					<div class="msui_flex message">
						<div class="msui_flex msui_item flex_direction flex_justify3 contentBox">
							<div class="msui_flex flex_align flex_justify1 item1">
								<span>作品展示</span>
								<a>/更多</a>
							</div>
							<ul class="msui_flex showList">
								<li  class="msui_flex msui_item js-list1">
									<a class="msui_item">
										<img src="static/images/1.jpg">
										<span>123</span>
									</a>
								</li>
								<li  class="msui_flex msui_item js-list2">
									<a class="msui_item">
										<img src="static/images/1.jpg">
										<span>123</span>
									</a>
								</li>
								<li  class="msui_flex msui_item js-list3">
									<a class="msui_item">
										<img src="static/images/1.jpg">
										<span>123</span>
									</a>
								</li>
							</ul>
						</div>
						<div class="title msui_flex flex_justify1 js-row">
							<p class="row2">不做代码的搬运工</p>
							<p class="row1">我们只造轮子</p>
						</div>
					</div>
					<div class="botButton">
						<a href="#page4"  class="top-ico1"></a>
					</div>
				</div>
				<div class="section section4">
					<div class="msui_flex flex_align flex_direction header">
						<div class="msui_item headerTitle js-header">
							<span>Message</span>
						</div>
						<div class="msui_item headerBaseline"></div>
					</div>
					<div class="msui_flex contentBox">
						<div class="msui_item">
							<h2>2016(湖南尖塔-延农创业大厦)</h2>
							<p>在湖南尖塔信息科技有限公司开始我的前端之路</p>
							<h2>参与项目开发:</h2>
							<p>PC端:中南大学项目网、DI官网、南浔官网</p>
							<p>微信端:泉水叮咚、微盘、抢工长、约会网、乡村百事通、开摩邦</p>
							<h2>学会技能:</h2>
							<p>掌握html、css、js,能构建手机端、PC段静态页面</p>
							<P>熟练运用各种UI框架。如:jquery_weui、mui等</P>
							<p>对js基础语法有较多了解。能用原生js编写插件</p>
							<p>对三大框架有过基本了解,能够用react进行开发</p>
							<p>会一门后台语言PHP。能用thinkPhp3.2搭建网页后台框架。</p>
							<p>了解webpack实现机制、能用webpack实现前端工程化项目。</p>
						</div>
						<div class="msui_item">
							<div class="map" id='allmap'>
							</div>
						</div>
					</div>
					<div class="botButton">
						<a href="#page5"  class="top-ico2"></a>
					</div>
				</div>
				<div class="section section5">
					<div class="msui_flex flex_align flex_direction header">
						<div class="msui_item headerTitle js-header">
							<span>Contract Me</span>
						</div>	
						<div class="msui_item headerBaseline"></div>
					</div>
					<div class="msui_flex message">
						<div class="msui_flex msui_item flex_direction flex_justify3">
							<div class="msui_flex flex_justify1 flex_align item1">
								<span>QQ:</span><span>799834285</span>
							</div>
							<div class="msui_flex flex_justify1 flex_align item1">
								<span>Telephone:</span><span>18520422010</span>
							</div>
							<div class="msui_flex flex_justify1 flex_align item1">
								<span>码云:</span><span>Lidingkorol</span>	
							</div>
							<div class="msui_flex flex_justify1 flex_align item1">
								<span>Email:</span><span>799834285@qq.com</span>	
							</div>
						</div>
						<div class="title msui_flex msui_item flex_justify1 js-row">
							<p class="row2">不亦说乎</p>
							<p class="row1">有朋自远方来</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	<script src="/static/jquery-1.10.2.min.js"></script>
	<script src="/static/fullPage/js/jquery.fullPage.min.js"></script>
	<script src="http://cdn.staticfile.org/jquery-easing/1.3/jquery.easing.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lpxsGGNecPjI4Ao0sti0ioUtq5jovhOk"></script>
	<script src="/static/js/typer.js"></script>
	<script>
		$(function(){
			$('#fullPage').fullpage({
				'verticalCentered':false,
				'navigation': true,
				'navigationPosition': 'right',
        		'navigationTooltips': ['首页', '关于我', '历程', '动态','联系'],
        		'anchors': ['page1', 'page2', 'page3', 'page4','page5'],
        		'normalScrollElements':'.map',
        		afterLoad: function(anchorLink, index){
					if(index == 2){
						$('.section2 .js-header span').delay(100).addClass('headerAnimate');
						$('.section2 .js-list1').find('a').delay(100).animate({
							top: '0'
						}, 1000, 'easeOutExpo');
						$('.section2 .js-list1').find('a').delay(100).animate({
							top: '0'
						}, 1000, 'easeOutExpo');
						$('.section2 .js-list2').find('a').delay(300).animate({
							top: '0'
						}, 1000, 'easeOutExpo');
						$('.section2 .js-list3').find('a').delay(500).animate({
							top: '0'
						}, 1000, 'easeOutExpo');
						$('.section2 .subtitle p').delay(1000).animate({
							left: '0'
						}, 1500, 'easeOutExpo');
					}
					if(index == 3){
						$('.section3 .js-header span').delay(100).addClass('headerAnimate');
						$('.section3 .js-row p.row1').delay(100).animate({
							top: '0px'
						}, 1000, 'easeOutExpo');
						$('.section3 .js-row p.row2').delay(100).animate({
							bottom: '100px'
						}, 1000, 'easeOutExpo');
					}
					if(index == 4){
						$('.section4 .js-header span').delay(100).addClass('headerAnimate');
					}
					if(index == 5){
						$('.section5 .js-header span').delay(100).addClass('headerAnimate');
						$('.section5 .js-row p.row1').delay(100).animate({
							top: '0px'
						}, 1000, 'easeOutExpo');
						$('.section5 .js-row p.row2').delay(100).animate({
							bottom: '0px'
						}, 1000, 'easeOutExpo');
					}
				},
				onLeave: function(index, direction){
					if(index == '1'){
						document.getElementById('type').innerHTML=='';
						type=null;
					}
					if(index == '2'){
						$('.section2 .js-header span').delay(100).removeClass('headerAnimate');
						$('.section2 .js-list1').find('a').animate({
							top: '-250px'
						}, 100, 'easeOutExpo');
						$('.section2 .js-list2').find('a').animate({
							top: '-250px'
						}, 100, 'easeOutExpo');
						$('.section2 .js-list3').find('a').animate({
							top: '-250px'
						}, 100, 'easeOutExpo');
						$('.section2 .subtitle p').delay(1000).animate({
							left: '-120%'
						}, 1500, 'easeOutExpo');
					}
					if(index == 3){
						$('.section3 .js-header span').delay(100).removeClass('headerAnimate');
						$('.section3 .js-row p.row1').delay(100).animate({
							top: '-350px'
						}, 1000, 'easeOutExpo');
						$('.section3 .js-row p.row2').delay(100).animate({
							bottom: '-350px'
						}, 1000, 'easeOutExpo');
					}
					if(index == 4){
						$('.section4 .js-header span').delay(100).removeClass('headerAnimate');
					}
					if(index == 5){
						$('.section5 .js-header span').delay(100).removeClass('headerAnimate');
						$('.section5 .js-row p.row1').delay(100).animate({
							top: '-330px'
						}, 1000, 'easeOutExpo');
						$('.section5 .js-row p.row2').delay(100).animate({
							bottom: '-330px'
						}, 1000, 'easeOutExpo');
					}
					
				}
			});
			var type=new Plugins({
				target:document.getElementById('type'),
				content:["I'm 飘香扣肉","热爱前端,热爱生活",1000,"clear","Wellcome!!"],
				speed:300,
				DelSpeed:10
			})
				// 百度地图API功能
			var map = new BMap.Map("allmap");
			// 创建地址解析器实例
			var myGeo = new BMap.Geocoder();
			// 将地址解析结果显示在地图上,并调整地图视野
			myGeo.getPoint("延农创业大厦", function(point) {
				if(point) {
					map.centerAndZoom(point, 16);
					map.addOverlay(new BMap.Marker(point));
				} else {
					alert("您选择地址没有解析到结果!");
				}
			}, "长沙市");
			map.enableScrollWheelZoom(true);
		});
		
	</script>
	</body>
</html>
